<div id="<?php echo $uniqid;?>" style="padding:5px">
    <table border="0" width="100%" cellspacing="1" cellpadding="5" class="formtable">

        <tr bgcolor="#FFFFFF">
            <td class="tlabel">事项名称：</td>
            <td><input type="text" style="width: 500px;"
                       class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                       placeholder="请输入事项名称.." v-model="params.title">
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">排序：</td>
            <td><input name="sortorder" type="text"
                       class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                       placeholder="请输入排序.." v-model="params.sortorder"></td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td colspan=2>
                <div style="display: flex">
                    <div onselectstart="return false;">
                        <table id="eventmaterial1"></table>
                    </div>
                    <div style="display:flex; justify-content: center;align-items: center;flex-direction: column">
                        <a href="javascript:;" class="l-btn l-btn-small easyui-linkbutton" @click="checkIn"   style="padding:0;margin:5px">　<< 选中　</a>
                        <a href="javascript:;" class="l-btn l-btn-small easyui-linkbutton" @click="checkOut"  style="padding:0;margin:5px">　>> 移除　</a>
                    </div>
                    <div onselectstart="return false;">
                        <table id="eventmaterial2"></table>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>

<script>
    var eventlisteditVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            params: JSON.parse("<?php echo addslashes($dataset);?>"),
        },
        mounted() {
            this.init();
        },
        methods: {
            init: function () {
                this.params.sortorder = this.params.sortorder ? this.params.sortorder : 500;
            },
            checkIn(){
                let ids = [];
                $("#eventmaterial2").datagrid("getSelections").forEach((item)=>{
                    ids.push(item.id);
                });
                $.post('/admin/eventlist/checkin', {list_id: eventlisteditVm.params.id, ids: ids}, function (data) {
                    if (data.ret === 0) {
                        $.messager.show({
                            title: '提示',
                            msg: data.msg,
                            timeout: 3000,
                            showType: 'slide'
                        });
                        eventmaterial1Search();
                        eventmaterial2Search();
                    } else {
                        $.messager.alert('提示', data.msg, 'warning');
                    }
                }, 'json');
            },
            checkOut(){
                let ids = [];
                $("#eventmaterial1").datagrid("getSelections").forEach((item)=>{
                    ids.push(item.id);
                });
                $.post('/admin/eventlist/checkout', {list_id: eventlisteditVm.params.id, ids: ids}, function (data) {
                    if (data.ret === 0) {
                        $.messager.show({
                            title: '提示',
                            msg: data.msg,
                            timeout: 3000,
                            showType: 'slide'
                        });
                        eventmaterial1Search();
                        eventmaterial2Search();
                    } else {
                        $.messager.alert('提示', data.msg, 'warning');
                    }
                }, 'json');
            }
        }
    });
    var eventmaterial1Search = function () {
        $("#eventmaterial1").datagrid({
            width: 360,
            height: 400,//高度
            singleSelect: false,//如果为true，则只允许选择一行
            striped: true,//是否显示斑马线效果。
            rownumbers: false,//如果为true，则显示一个行号列。
            pagination: false,//是否显示分页
            method: 'post',
            sortName: 'sortorder',
            sortOrder: 'desc',
            url: '/admin/eventlist/getmaterial1?list_id=' + eventlisteditVm.params.id,
            fitColumns: true,
            nowrap: true,
            selectOnCheck: true,
            checkOnSelect: true,
            columns: [[
                {field: 'id', checkbox:true, width: fixWidth(10)},
                {field: 'title', title: '已选办事材料', width: fixWidth(40)}
            ]]
        });
    };
    var eventmaterial2Search = function () {
        $("#eventmaterial2").datagrid({
            width: 360,
            height: 400,//高度
            singleSelect: false,//如果为true，则只允许选择一行
            striped: true,//是否显示斑马线效果。
            rownumbers: false,//如果为true，则显示一个行号列。
            pagination: false,//是否显示分页
            method: 'post',
            sortName: 'sortorder',
            sortOrder: 'desc',
            url: '/admin/eventlist/getmaterial2?list_id=' + eventlisteditVm.params.id,
            fitColumns: true,
            nowrap: true,
            selectOnCheck: true,
            checkOnSelect: true,
            columns: [[
                {field: 'id', checkbox:true, width: fixWidth(10)},
                {field: 'title', title: '未选办事材料', width: fixWidth(40)}
            ]]
        });
    };
    $(function () {
        eventmaterial1Search();
        eventmaterial2Search();
        $('#eventlistsubmit').click(function () {
            let act = (eventlisteditVm.params.id > 0) ? 'edit' : 'add';
            $.post('/admin/eventlist/' + act, eventlisteditVm.params, function (data) {
                if (data.ret === 0) {
                    $.messager.show({
                        title: '提示',
                        msg: data.msg,
                        timeout: 3000,
                        showType: 'slide'
                    });
                    if (typeof (eventlistReload) !== 'undefined') {
                        eventlistReload();
                    }
                    $("#eventlistdlg").dialog('close');
                } else {
                    $.messager.alert('提示', data.msg, 'warning');
                }
            }, 'json');
        });
    });
</script>
